<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>驴妈妈统计系统</title>
    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />
    <link rel="stylesheet"  href="${rc.contextPath}/stylesheets/daterangepicker.css">
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/tips.css" />

    <script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
</head>
<style>
	th{text-align: center;}
	.productName{cursor: pointer;}
</style>
<body class="skin-2" style="background-color: #FFF;">
<!--评价排序table-->
<div class="tabbable">
    <div class="tab-content">
        <div id="manage" class="tab-pane active in">
            <div class="row">
                <div class="col-xs-12">
                    <!-- 筛选条件开始 -->
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h4 class="widget-title">产品评价排名</h4>
                                </div>
                                <div class="widget-body" style="background-color: #EFF3F8;">
                                    <div class="widget-main">
                                        <form class="form-inline" id="searchForm" method="post" action="#">
                                            <div class="form-group">
                                                <label>选择时段
                                                    <input type="text" style="height: 30px; font-size: 14px; font-weight: normal; font-family: inherit;" id="config-demo" name="chooseTime"
                                                           class="form-control time">
                                                    <input type="hidden" id="selectedTime" value="${selectedTime!""}">
                                                    <button id="#dayBtn" type="button"
                                                            onclick="replaceDate(this,'1');selectTime('1');"
                                                            class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        昨日
                                                    </button>
                                                    <button id="weekBtn" type="button"
                                                            onclick="replaceDate(this,'7');selectTime('7');"
                                                            class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        过去7天
                                                    </button>
                                                    <button id="monthBtn" type="button"
                                                            onclick="replaceDate(this,'31');selectTime('31');"
                                                            class="btn btn-white btn-sm">
                                                        <span class="ace-icon icon-on-right bigger-110"></span>
                                                        过去31天
                                                    </button>
                                                </label>
                                                <label style="padding-left: 15px;">品类
                                                    <select data-placeholder="" class="chosen-select" id="categoryId">
                                                        <#list categories as cate>
                                                            <option value="${cate.value}" <#if procategoryId?? && cate.value==procategoryId>selected</#if>>${cate.showName!""}</option>
                                                        </#list>
                                                    </select>
                                                </label>
                                                <button id="search" type="button" class="btn btn-pink btn-sm"
                                                        style="margin-left: 50px;">
                                                    <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                                    Search
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 筛选条件结束 -->
                    <!--表格开始-->
                    <div class="row">
                        <div class="col-sm-6" id="wordsranking1Col">
                            <div class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h4 style="color:#000;"><span id="keyWordName1"></span>
                                        <label class="help_img">
                                            <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
                                            <span class='tips'>产品按照好评数排行<span class="content_name"></span><s></s></span>
                                        </label>
                                    </h4>
                                </div>
                                <div class="widget-body" style="height: 620px;">
                                    <div id="wordsranking1" style="cursor: pointer;"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6"  style="padding-left: 0px!important;" id="wordsranking2Col">
                            <div  class="widget-box">
                                <div class="widget-header widget-header-small">
                                    <h4 style="color:#000;"><span id="keyWordName2"></span>
                                        <label class="help_img">
                                            <i class="blue ace-icon fa fa-question-circle bigger-120" style="color:#6f727f!important;"></i>
                                            <span class='tips'>产品按照差评数排行<span class="content_name"></span><s></s></span>
                                        </label>
                                    </h4>
                                </div>
                                <div class="widget-body" style="height: 620px;">
                                    <div id="wordsranking2"  style="cursor: pointer;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--表格结束-->
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="choose_date" value="${choose_date!''}"/>
<input type="hidden" id="procategoryId" value="${procategoryId!''}"/>
<input type="hidden" id="flag" value="${flag!''}"/>

<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
<script src="${rc.contextPath}/assets/js/user/base.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<script src="${rc.contextPath}/assets/js/jquery-ui.min.js"></script>
<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="${rc.contextPath}/javascripts/daterangepicker.js"></script>
<!-- ace scripts -->
<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
<script src="${rc.contextPath}/assets/js/comment/dateSelector.js"></script>
<script src="${rc.contextPath}/javascripts/d3.min.js"></script>
<script src="${rc.contextPath}/javascripts/g2.js"></script>
<script src="${rc.contextPath}/javascripts/g2-modal.js"></script>
<script src="${rc.contextPath}/javascripts/slider.js"></script>
<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
<script type="text/javascript" src="${rc.contextPath}/javascripts/FileSaver.js"></script>		
<script type="text/javascript" src="${rc.contextPath}/javascripts/export-csv.js"></script>
<script type="text/javascript">
  d3.select(self.frameElement).style("height", "900px");
 	$(document).ready(function () {
        $(".chosen-select").chosen();
        $(".chosen-select-deselect").chosen({ allow_single_deselect: true });
    });

    $("#search").on("click", function () {
        getDataProduct();
    });

    function getDataProduct(){

        openPartialLayer($("#wordsranking1Col"));
        openPartialLayer($("#wordsranking2Col"));
        $("#search").attr("disabled", true);

        var flag = $("#flag").val();
    	if(flag == 2){
            var choose_date = $("#choose_date").val();
            var categoryId = $("#procategoryId").val();
            var selectedTime = $('#selectedTime').val();
            $("#flag").remove();
        } else {
            var choose_date = $("#config-demo").val();
            var categoryId = $("#categoryId").val();
            var selectedTime = $('#selectedTime').val();
        }
        $.ajax({
            url: '${rc.contextPath}/productComment/productRank',
            type: "GET",
            data: {
                choose_date: choose_date,
                categoryId: categoryId,
                currentPage: 1,
                pageSize: 20
            },
            success: function (data) {
                $("#keyWordName1").html("产品 好评数量榜");
                var exportForm={
                	'headers':['产品id','产品名称','好评数'],
                	'cols':['id','name','value']
                };
                chart1 = horizontalHistogramModal(data.barData1, "wordsranking1", "name", "value", 600,"",exportForm);
                if (data.barData1 != "") {
                    chart1.on('plotclick', function (ev) {
                        var productId = ev.data._origin.id;
                        var productName = ev.data._origin.name;
                        window.location.href = '${rc.contextPath}/productComment/detail?flag=' + 3 + '&productId=' + productId + '&productName=' + productName + '&choose_date=' + choose_date
                            + '&selectedTime=' + selectedTime +'&categoryId=' + categoryId;
                    });
                }
                $("#keyWordName2").html("产品 差评数量榜");
                var exportForm={
                	'headers':['产品id','产品名称','差评数'],
                	'cols':['id','name','value']
                };
                chart2 = horizontalHistogramModal(data.barData2, "wordsranking2", "name", "value", 600,"",exportForm);
                if (data.barData2 != "") {
                    chart2.on('plotclick', function (ev) {
                        var productId = ev.data._origin.id;
                        var productName = ev.data._origin.name;
                        window.location.href = '${rc.contextPath}/productComment/detail?flag=' + 3 + '&productId=' + productId + '&productName=' + productName + '&choose_date=' + choose_date
                            + '&selectedTime=' + selectedTime +'&categoryId=' + categoryId;
                    });
                }
            },
            complete: function () {
                removeLoading($("#wordsranking1Col"));
                removeLoading($("#wordsranking2Col"));
                $("#search").attr("disabled", false);
            }
        });
    }

    var initSelectedTime = "${selectedTime!''}";
    window.onload = function () {
        //选中时间回显
        if (initSelectedTime) {
            if (initSelectedTime === '1') {
                replaceDate($('#dayBtn'), '1');
                $('#selectedTime').val('1');
            } else if (initSelectedTime === '7') {
                replaceDate($('#weekBtn'), '7');
            } else if (initSelectedTime === '31') {
                replaceDate($('#monthBtn'), '31');
                $('#selectedTime').val('31');
            } else if (initSelectedTime === '365') {
                setCustomChooseTime(365);
            } else if (initSelectedTime === '15') {
                setCustomChooseTime(15);
            }
        } else {
            var choose_date = "${choose_date!''}";
            if(choose_date ){
                $("#config-demo").val(choose_date);
            }else {
                replaceDate($('#weekBtn'), '7');
            }
        }
        $("#search").click();
    };
    //设置选择的时间
    var selectTime = function (selectedTime) {
        $('#selectedTime').val(selectedTime);
    };
    $(".applyBtn").click(function () {
        $(".btn.btn-white.btn-sm.btn-info").removeClass("btn-info");
        $('#selectedTime').val("");
    });
</script>
</body>
</html>